/*
 * @Author: lyt
 * @Date: 2024-12-11 16:21:22
 * @LastEditTime: 2025-01-06 14:14:36
 * @LastEditors: lyt
 * @Description: lyt
 * @FilePath: /osmp-demo/osmp-demo-vue3/src/views/demo/form/components/formData.tsx
 *
 */

import { apiSelectDemoApi } from '/@/api/demo/formApi';
import { FormSchema } from '/@/components/Form/index';
import dayjs from 'dayjs';
import { treeOptionsListApi } from '/@/api/demo/treeApi';

export const basicSchema: FormSchema[] = [
  {
    label: '新建合成请求表单',
    field: 'divider-basic',
    component: 'Divider',
  },
  {
    label: '随机参数',
    field: 'randomParameters',
    component: 'Input',
    // 是否必填（true：label前加红色星号+调用表单校验validateFields()会校验该字段）
    required: true,
    // 宽度占表单整体宽度的24格（常见取值：总-24，半-12）
    colProps: {
      span: 24,
    },
  },
  {
    label: '数据规模 ',
    field: 'dataSize',
    component: 'Input',
    required: true,
    colProps: {
      span: 24,
    },
  },
  {
    label: '节点数量',
    field: 'numberOfNodes',
    component: 'InputNumber',
    componentProps: {
      placeholder: '请输入', // 自定义placeholder
    },
    colProps: {
      span: 24,
    },
  },
  {
    label: '可信证明',
    field: 'trustEvidence',
    component: 'Switch',
    defaultValue: true, // 设置默认值
    colProps: {
      span: 24,
    },
  },
  {
    label: '其他常用表单项',
    field: 'divider-basic',
    component: 'Divider',
  },
  {
    label: '存储量',
    field: 'storage',
    component: 'Input',
    colProps: {
      span: 12,
    },
    componentProps: {
      onChange: (e: any) => {
        console.log('存储量监听事件', e);
      },
    },
    suffix: 'T',
  },
  {
    label: '表单禁用',
    field: 'storage',
    component: 'Input',
    colProps: {
      span: 12,
    },
    componentProps: {
      disabled: true,
    },
  },
  {
    label: '单选',
    field: 'radio',
    component: 'RadioGroup',
    colProps: {
      span: 12,
    },
    componentProps: {
      options: [
        {
          label: '过程查验',
          value: '1',
        },
        {
          label: '完整性验证',
          value: '2',
        },
        {
          label: '异常追溯',
          value: '3',
        },
      ],
    },
  },
  {
    label: '多选',
    field: 'checkbox',
    component: 'CheckboxGroup',
    colProps: {
      span: 12,
    },
    componentProps: {
      options: [
        {
          label: '过程查验',
          value: '1',
        },
        {
          label: '完整性验证',
          value: '2',
        },
        {
          label: '异常追溯',
          value: '3',
        },
      ],
    },
    defaultValue: ['1', '2'],
  },
  {
    label: '日期选择',
    field: 'dateSelect',
    component: 'DatePicker',
    componentProps: {
      //日期格式化，页面上显示的值
      format: 'YYYY-MM-DD',
      //返回值格式化（绑定值的格式）
      valueFormat: 'YYYY-MM-DD',
      //是否显示今天按钮
      showToday: true,
      //不可选择日期
      disabledDate: (currentDate) => {
        const date = dayjs(currentDate).format('YYYY-MM-DD');
        const nowDate = dayjs(new Date()).format('YYYY-MM-DD');
        //当天以前的日期不可选择
        if (date < nowDate) {
          return true;
        }
        return false;
      },
      placeholder: '请选择',
    },
    colProps: {
      span: 12,
    },
  },
  {
    label: '日期范围',
    field: 'dateRangeSelect',
    component: 'RangeDate',
    componentProps: {
      //日期格式化
      format: 'YYYY/MM/DD',
      //范围文本描述用集合
      placeholder: ['请选择开始日期', '请选择结束日期'],
    },
    colProps: {
      span: 12,
    },
  },
  {
    label: '下拉选择框',
    field: 'jinputtype',
    component: 'Select',
    componentProps: {
      options: [
        { value: '1', label: '1' },
        { value: '2', label: '2' },
        { value: '3', label: '3' },
        { value: '4', label: '4' },
      ],
      //下拉多选
      mode: 'multiple',
      //配置是否可搜索
      showSearch: true,
      // 配置浮层的挂载容器，默认为元素body
      getPopupContainer: () => document.body,
    },
    colProps: {
      span: 12,
    },
  },
  {
    label: '级联选择',
    field: 'cascade',
    component: 'Cascader',
    componentProps: {
      //最多显示多少个tag
      maxTagCount: 2,
      //浮层预设位置
      placement: 'bottomRight',
      //在选择框中显示搜索框,默认false
      showSearch: true,
      options: [
        {
          label: '上海',
          value: 'Shanghai',
          children: [
            {
              label: '浦东新区',
              value: 'Pudong',
            },
            {
              label: '静安区',
              value: 'Jingan',
            },
          ],
        },
        {
          label: '江苏',
          value: 'JiangSu',
          children: [
            {
              label: '南京',
              value: 'Nanjing',
              children: [
                {
                  label: '中华门',
                  value: 'ZhongHuaMen',
                },
              ],
            },
          ],
        },
      ],
      getPopupContainer: () => document.body,
    },
    colProps: {
      span: 12,
    },
  },
  {
    label: '懒加载远程下拉',
    field: 'apiSelect',
    component: 'ApiSelect',
    componentProps: {
      // 远程请求的接口
      api: apiSelectDemoApi,
      // 请求参数
      params: {
        id: 1,
      },
      // 返回数据中数据列表的字段中label的字段
      labelField: 'name',
      // 返回数据中数据列表的字段中value的字段
      valueField: 'id',
      immediate: false,
      // onChange: (e) => {
      //   console.log('selected:', e);
      // },
      // // atfer request callback
      // onOptionsChange: (options) => {
      //   console.log('get options', options.length, options);
      // },
    },
    colProps: {
      span: 12,
    },
  },
  {
    label: '自定义Slot',
    field: 'formSlotField',
    component: 'Input',
    slot: 'formSlot',
    colProps: {
      span: 24,
    },
  },
];

export const AllSchema: FormSchema[] = [
  {
    label: '输入框类型',
    field: 'divider-basic',
    component: 'Divider',
  },
  {
    label: 'input输入框 ',
    field: 'input',
    component: 'Input',
    colProps: {
      span: 12,
    },
  },
  {
    label: 'InputPassword密码输入框 ',
    field: 'inputPassword',
    component: 'InputPassword',
    colProps: {
      span: 12,
    },
  },
  {
    label: 'InputNumber数值输入框 ',
    field: 'inputNumber',
    component: 'InputNumber',
    componentProps: {
      //带标签的 input，设置后置标签
      addonBefore: '保留两位小数',
      //最大值
      max: 100,
      //数值精度
      precision: 2,
      //步数
      step: 0.1,
    },
    colProps: {
      span: 12,
    },
  },
  {
    label: '数值范围输入框',
    field: 'jRangeNumber',
    component: 'JRangeNumber',
  },
  {
    label: 'InputSearch搜索框',
    field: 'inputSearch',
    component: 'InputSearch',
    componentProps: {
      //搜索之后触发事件
      onSearch: (value: any) => {
        //搜索之后的逻辑处理
        console.log(value);
      },
    },
  },
  {
    label: 'InputTextArea文本域',
    field: 'inputTextArea',
    component: 'InputTextArea',
    //属性
    componentProps: {
      //可以点击清除图标删除内容
      allowClear: true,
      //是否展示字数
      showCount: true,
      //自适应内容高度，可设置为 true | false 或对象：{ minRows: 2, maxRows: 6 }
      autoSize: {
        //最小显示行数
        minRows: 2,
        //最大显示行数
        maxRows: 3,
      },
    },
    colProps: {
      span: 12,
    },
  },
  {
    label: '文件上传',
    field: 'divider-basic',
    component: 'Divider',
  },
  {
    label: 'JImageUpload图片上传',
    field: 'jImageUpload',
    component: 'JImageUpload',
    componentProps: {
      //按钮显示文字
      text: '图片上传',
      //支持两种基本样式picture和picture-card
      listType: 'picture-card',
      //用于控制文件上传的业务路径,默认temp
      bizPath: 'temp',
      //是否禁用
      disabled: false,
      //最大上传数量
      fileMax: 1,
    },
    colProps: {
      span: 12,
    },
  },
  {
    label: 'JUpload上传组件',
    field: 'jUpload',
    component: 'JUpload',
    componentProps: {
      //是否显示选择按钮
      text: '文件上传',
      //最大上传数
      maxCount: 2,
      //是否显示下载按钮
      download: true,
    },
    colProps: {
      span: 12,
    },
  },
  {
    label: '下拉选择框类型',
    field: 'divider-basic',
    component: 'Divider',
  },
  {
    label: 'Select下拉框',
    field: 'select',
    component: 'Select',
    componentProps: {
      options: [
        { value: 'like', label: '模糊（like）' },
        { value: 'ne', label: '不等于（ne）' },
        { value: 'ge', label: '大于等于（ge）' },
        { value: 'le', label: '小于等于（le)' },
      ],
      //下拉多选
      mode: 'multiple',
      //配置是否可搜索
      showSearch: true,
    },
    colProps: {
      span: 12,
    },
  },
  {
    label: 'JSelectInput可输入下拉框',
    field: 'inputSelect',
    component: 'JSelectInput',
    componentProps: {
      options: [
        { label: 'Default', value: 'default' },
        { label: 'IFrame', value: 'iframe' },
      ],
      //是否为搜索模式
      showSearch: true,
      //是否禁用
      disabled: false,
    },
    colProps: {
      span: 12,
    },
  },
  {
    label: 'TreeSelect树下拉选择',
    field: 'treeSelect',
    component: 'TreeSelect',
    componentProps: {
      //是否显示下拉框，默认false
      treeCheckable: true,
      //标题
      title: '下拉树',
      //下拉树
      treeData: [
        {
          label: '洗衣机',
          value: '0',
          children: [
            {
              label: '滚筒洗衣机',
              value: '0-1',
            },
          ],
        },
        {
          label: '电视机',
          value: '1',
          children: [
            {
              label: '平板电视',
              value: '1-1',
              disabled: true,
            },
            {
              label: 'CRT电视机',
              value: '1-2',
            },
            {
              label: '投影电视',
              value: '1-3',
            },
          ],
        },
      ],
    },
    colProps: {
      span: 12,
    },
  },
  {
    label: 'ApiSelectApi下拉框',
    field: 'apiSelect',
    component: 'ApiSelect',
    componentProps: {
      // 远程请求的接口
      api: apiSelectDemoApi,
      // 请求参数
      params: {
        id: 1,
      },
      //multiple: 多选；不填写为单选
      mode: 'multiple',
      //标题字段
      labelField: 'name',
      //值字段
      valueField: 'id',
      //返回结果字段
      resultField: 'records',
      immediate: false,
      // onChange: (e) => {
      //   console.log('selected:', e);
      // },
      // onOptionsChange: (options) => {
      //   console.log('get options', options.length, options);
      // },
    },
    colProps: {
      span: 12,
    },
  },
  {
    label: 'ApiTreeSelect树选择',
    field: 'apiTreeSelect',
    component: 'ApiTreeSelect',
    componentProps: {
      /* 请求api,返回结果,title：树名称，value：树的value值，children：子节点
         { result: { list: [{ title:'选项0',value:'0',key:'0',
           children: [ {"title": "选项0-0","value": "0-0","key": "0-0"},...]
           }, ...]
         }} */
      api: treeOptionsListApi,
      //请求参数
      params: {},
      //返回结果字段
      resultField: 'list',
    },
    colProps: {
      span: 12,
    },
  },
  {
    label: 'RadioGroup单选框组',
    field: 'radioGroup',
    component: 'RadioGroup',
    componentProps: {
      //options里面由一个一个的radio组成,支持disabled
      options: [
        { label: '男', value: 1 },
        { label: '女', value: 0 },
      ],
    },
    colProps: {
      span: 12,
    },
  },
  {
    label: 'CheckboxGroup 多选框组',
    field: 'checkboxGroup',
    component: 'CheckboxGroup',
    componentProps: {
      //RadioGroup 下所有 input[type="radio"] 的 name 属性
      name: '爱好',
      //options支持disabled禁用
      options: [
        { label: '运动', value: 0, disabled: true },
        { label: '听音乐', value: 1 },
        { label: '看书', value: 2 },
      ],
    },
    defaultValue: [2],
    colProps: {
      span: 12,
    },
  },
  {
    label: 'RadioButtonGroup单选按钮组',
    field: 'radioButtonGroup',
    component: 'RadioButtonGroup',
    componentProps: {
      options: [
        { label: '有效', value: 1 },
        { label: '无效', value: 0 },
      ],
    },
    colProps: {
      span: 12,
    },
  },
  {
    label: 'ApiRadioGroup单选框组',
    field: 'apiRadioGroup',
    component: 'ApiRadioGroup',
    componentProps: {
      api: treeOptionsListApi,
      //请求参数
      params: {},
      //是否为按钮风格类型，默认false
      isBtn: false,
      //返回集合名称
      resultField: 'list',
      //标题字段名称
      labelField: 'name',
      //值字段名称
      valueField: 'id',
    },
    colProps: {
      span: 24,
    },
  },
  {
    label: 'Cascader级联选择',
    field: 'cascade',
    component: 'Cascader',
    componentProps: {
      //最多显示多少个tag
      maxTagCount: 2,
      //浮层预设位置
      placement: 'bottomRight',
      //在选择框中显示搜索框,默认false
      showSearch: true,
      options: [
        {
          label: '上海',
          value: 'Shanghai',
          children: [
            {
              label: '浦东新区',
              value: 'Pudong',
            },
            {
              label: '静安区',
              value: 'Jingan',
            },
          ],
        },
        {
          label: '江苏',
          value: 'JiangSu',
          children: [
            {
              label: '南京',
              value: 'Nanjing',
              children: [
                {
                  label: '中华门',
                  value: 'ZhongHuaMen',
                },
              ],
            },
          ],
        },
      ],
      getPopupContainer: () => document.body,
    },
    colProps: {
      span: 12,
    },
  },
  {
    label: '日期选择框类型',
    field: 'divider-basic',
    component: 'Divider',
  },
  {
    label: 'DatePicker日期选择框',
    field: 'datePicker',
    component: 'DatePicker',
    componentProps: {
      //日期格式化，页面上显示的值
      format: 'YYYY-MM-DD',
      //返回值格式化（绑定值的格式）
      valueFormat: 'YYYY-MM-DD',
      //是否显示今天按钮
      showToday: true,
      //不可选择日期
      disabledDate: (currentDate) => {
        const date = dayjs(currentDate).format('YYYY-MM-DD');
        const nowDate = dayjs(new Date()).format('YYYY-MM-DD');
        //当天不可选择
        if (date == nowDate) {
          return true;
        }
        return false;
      },
    },
    colProps: {
      span: 12,
    },
  },
  {
    label: 'MonthPicker月份选择',
    field: 'monthPicker',
    component: 'MonthPicker',
    componentProps: {
      //不可选择日期
      disabledDate: (currentDate) => {
        const date = dayjs(currentDate).format('YYYY-MM');
        const nowDate = dayjs(new Date()).format('YYYY-MM');
        //当天不可选择
        if (date == nowDate) {
          return true;
        }
        return false;
      },
    },
    colProps: {
      span: 12,
    },
  },
  {
    label: 'WeekPicker周选择',
    field: 'weekPicker',
    component: 'WeekPicker',
    componentProps: {
      size: 'small',
    },
    colProps: {
      span: 12,
    },
  },
  {
    label: 'TimePicker时间选择',
    field: 'timeSelect',
    component: 'TimePicker',
    componentProps: {
      size: 'default',
      //日期时间或者时间模式下是否显示此刻，不支持日期时间范围和时间范围
      showNow: true,
    },
    colProps: {
      span: 12,
    },
  },
  {
    label: 'RangePicker日期时间范围选择',
    field: 'dateTimeRangePicker',
    component: 'RangePicker',
    componentProps: {
      //是否显示时间
      showTime: true,
      //日期格式化
      format: 'YYYY/MM/DD HH:mm:ss',
      //范围文本描述用集合
      placeholder: ['请选择开始日期时间', '请选择结束日期时间'],
    },
    defaultValue: [new Date('2024-12-31'), new Date('2024-12-31')],
    colProps: {
      span: 12,
    },
  },
  {
    label: 'RangeDate日期范围选择',
    field: 'rangeDate',
    component: 'RangeDate',
    componentProps: {
      //日期格式化
      format: 'YYYY/MM/DD',
      //范围文本描述用集合
      placeholder: ['请选择开始日期', '请选择结束日期'],
    },
    colProps: {
      span: 12,
    },
  },
  {
    label: 'RangeTime时间范围选择',
    field: 'timeRangeSelect',
    component: 'RangeTime',
    componentProps: {
      //日期格式化
      format: 'HH/mm/ss',
      //范围文本描述用集合
      placeholder: ['请选择开始时间', '请选择结束时间'],
    },
    colProps: {
      span: 12,
    },
  },
  {
    label: '其它类型',
    field: 'divider-basic',
    component: 'Divider',
  },
  {
    label: 'Switch开关',
    field: 'switch',
    component: 'Switch',
    componentProps: {
      //开关大小，可选值：default small
      size: 'default',
      //非选中时的内容
      unCheckedChildren: '开启',
      //非选中时的值
      unCheckedValue: '0',
      //选中时的内容
      checkedChildren: '关闭',
      //选中时的值
      checkedValue: '1',
      //是否禁用
      disabled: false,
    },
    colProps: {
      span: 12,
    },
  },
  {
    label: 'Slider滑动输入条',
    field: 'slider',
    component: 'Slider',
    componentProps: {
      //最小值
      min: -20,
      //最大值
      max: 100,
      //是否为双滑块模式
      range: true,
      //刻度标记
      marks: {
        '-20': '-20°C',
        0: '0°C',
        26: '26°C',
        37: '37°C',
        100: {
          style: {
            color: '#f50',
          },
          label: '100°C',
        },
      },
    },
    colProps: {
      span: 12,
    },
  },
  {
    label: '富文本',
    field: 'jEditor',
    component: 'JEditor',
    componentProps: {
      //是否禁用
      disabled: false,
    },
    colProps: {
      span: 24,
    },
  },
  {
    label: 'markdown',
    field: 'markdown',
    component: 'JMarkdownEditor',
    componentProps: {
      //是否禁用
      disabled: false,
    },
    colProps: {
      span: 24,
    },
  },
  {
    label: 'Rate评分',
    field: 'rate',
    component: 'Rate',
    componentProps: {
      //是否允许半选
      allowHalf: true,
      //star 总数
      count: 5,
      //tooltip提示，有几颗星写几个
      tooltips: ['非常差', '较差', '正常', '很好', '非很好'],
    },
    colProps: {
      span: 24,
    },
  },
];
